﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>电影网站</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/icofont.css" />
		<link rel="stylesheet" href="css/mian_style.css" />
	</head>
	<body>
		<!--头部开始	-->
		<header class="header">
			<div class="container">
				<div class="header_area">
					<div class="logo">
						<a href="index.html">
							<img src="picture/logo.png" alt="logo"/>
						</a>
					</div>	
					<div class="meau">
						<ul>
							<li>
								<a  href="index.html">首页</a>
							</li>
							<li>
								<a  href="movies.html">电影</a>
							</li>
							<li>
								<a class="active" href="celebrities.html">明星</a>
							</li>
							<li>
								<a href="hot.html">热点</a>
							</li>
							<li>
								<a href="news.html">新闻</a>
							</li>
							<li style="width: 120px;">
								<a href="###" class="theme-btn">
									<i class="icofont icofont-ticket"></i>
									&nbsp;&nbsp;订票									
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--头部结束-->			
		</header>
		<!--背景开始-->
		<!-- breadcrumb area start -->
		<section class="breadcrumb-area">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<div class="breadcrumb-area-content">
							<h1>明星主页</h1>
							<h2>Celebrities Page</h2>
						</div>
					</div>
				</div>
			</div>
		</section><!-- breadcrumb area end -->
		<!-- transformers area start -->
		<section class="transformers-area">
			<div class="container">
				<div class="transformers-box">
					<div class="row flexbox-center">
						<div class="col-lg-5 text-lg-left text-center">
							<div class="transformers-content">
								<img src="picture/video3.png" alt="about" />
							</div>
						</div>
						<div class="col-lg-7" style="margin-left: 50px;">
							<div class="transformers-content mtr-30">
								<h2>Alex Px.</h2>
								<a href="#" class="theme-btn">Biography</a>
								<a href="#">Filmography</a>
								<ul>
									<li>
										<div class="transformers-left">
											Height:
										</div>
										<div class="transformers-right">
											5.7”
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Weight:
										</div>
										<div class="transformers-right">
											1136LB
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Eye Color:
										</div>
										<div class="transformers-right">
											Black
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Hair Color: 
										</div>
										<div class="transformers-right">
											Black
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Birthday:
										</div>
										<div class="transformers-right">
											1985.Jun.20
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Language:
										</div>
										<div class="transformers-right">
											English, Russian
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Hobby:
										</div>
										<div class="transformers-right">
											Base Ball, Gaming, Exploring, Baook Reading
										</div>
									</li>
									<li>
										<div class="transformers-left">
											Follow:
										</div>
										<div class="transformers-right">
											<a href="#"><i class="icofont icofont-social-facebook"></i></a>
											<a href="#"><i class="icofont icofont-social-twitter"></i></a>
											<a href="#"><i class="icofont icofont-social-google-plus"></i></a>
											<a href="#"><i class="icofont icofont-youtube-play"></i></a>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section><!-- transformers area end -->
		<!-- details area start -->
		<section class="details-area">
			<div class="container">
				<div class="row">
					<div class="col-lg-9">
						<div class="details-content">
							<div class="details-overview">
								<h2>Overview</h2>
								<p>Humans are at war with the Transformers, and Optimus Prime is gone. The key to saving the future lies buried in the secrets of the past and the hidden history of Transformers on Earth. Now it's up to the unlikely alliance of inventor Cade Yeager, Bumblebee, a n English lord and an Oxford professor to save the world. Transformers: The Last Knight has a deeper mythos and bigger spectacle than its predecessors, yet still ends up being mostly hollow and cacophonous. The first "Transformers" movie that could actually be characterized as badass. Which isn't a bad thing. It may, in fact, be better.</p>
							</div>
							<div class="details-reply">
								<h2>Leave a Reply</h2>
								<form action="#">
									<div class="row">
										<div class="col-lg-4">
											<div class="select-container">
												<input type="text" placeholder="Name"/>
												<i class="icofont icofont-ui-user"></i>
											</div>
										</div>
										<div class="col-lg-4">
											<div class="select-container">
												<input type="text" placeholder="Email"/>
												<i class="icofont icofont-envelope"></i>
											</div>
										</div>
										<div class="col-lg-4">
											<div class="select-container">
												<input type="text" placeholder="Phone"/>
												<i class="icofont icofont-phone"></i>
											</div>
										</div>
										<div class="col-lg-12">
											<div class="textarea-container">
												<textarea placeholder="Type Here Message"></textarea>
												<button><i class="icofont icofont-send-mail"></i></button>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="details-comment">
								<a class="theme-btn theme-btn2" href="#">Post Comment</a>
							</div>
							<div class="details-thumb">
								<div class="details-thumb-prev">
									<div class="thumb-icon">
										<i class="icofont icofont-simple-left"></i>
									</div>
									<div class="thumb-text">
										<h4>Previous Post</h4>
										<p>Standard Post With Gallery</p>
									</div>
								</div>
								<div class="details-thumb-next">
									<div class="thumb-text">
										<h4>Next Post</h4>
										<p>Standard Post With Preview Image</p>
									</div>
									<div class="thumb-icon">
										<i class="icofont icofont-simple-right"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section><!-- details area end -->
		<footer id="end">
			<div class="container">
				<span class="company">
					北京时代国际影业有限公司
				</span>
			</div>
		</footer>
	</body>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/main.js"></script>
</html>
